<!--
 * @Author: HeAo
 * @Date: 2021-10-22 15:11:56
 * @LastEditTime: 2021-10-25 15:06:09
 * @LastEditors: HeAo
 * @Description: 
 * @FilePath: \ej-webui\src\views\order\index.vue
 * 别乱动！
-->
<template>
  <div class="order">
    <el-tabs v-model="activeName" @tab-click="tabClickHandler">
      <el-tab-pane label="所有订单" name="所有订单">
        <order-pane :key="active1"></order-pane>
      </el-tab-pane>
      <el-tab-pane label="待支付" name="待支付">
        <order-pane status="待支付" :key="active2"></order-pane>
      </el-tab-pane>
      <el-tab-pane label="待派单" name="待派单">
        <order-pane status="待派单" :key="active3"></order-pane>
      </el-tab-pane>
      <el-tab-pane label="待接单" name="待接单">
        <order-pane status="待接单" :key="active4"></order-pane>
      </el-tab-pane>
      <el-tab-pane label="待服务" name="待服务">
        <order-pane status="待服务" :key="active5"></order-pane>
      </el-tab-pane>
      <el-tab-pane label="待确认" name="待确认">
        <order-pane status="待确认" :key="active6"></order-pane>
      </el-tab-pane>
      <el-tab-pane label="已完成" name="已完成">
        <order-pane status="已完成" :key="active7"></order-pane>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import OrderPane from "@/components/OrderPane/index.vue";
export default {
  data() {
    return {
      activeName: "所有订单",
      active1: null,
      active2: null,
      active3: null,
      active4: null,
      active5: null,
      active6: null,
      active7: null,
    };
  },
  components: {
    OrderPane,
  },
  methods: {
    tabClickHandler(tab) {
      switch (Number(tab.index)) {
        case 0:
          this.active1 = new Date().getTime();
          break;
        case 1:
          this.active2 = new Date().getTime();
          break;
        case 2:
          this.active3 = new Date().getTime();
          break;
        case 3:
          this.active4 = new Date().getTime();
          break;
        case 4:
          this.active5 = new Date().getTime();
          break;
        case 5:
          this.active6 = new Date().getTime();
          break;
        case 6:
          this.active7 = new Date().getTime();
          break;
        default:
          break;
      }
    },
  },
};
</script>
<style scoped>
</style>
